<template>
  <div class="report">
    <el-card>
      <el-input placeholder="请输入文章名称" size="small" v-model="search.key" class="search_input">
        <el-button slot="append" size="small" type="primary" icon="el-icon-search" @click="queryData"></el-button>
      </el-input>
      <el-date-picker
        class="search_time"
        v-model="search.date"
        type="daterange"
        size="small"
        @change="queryData"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
      <span style="font-size: 12px;margin:0px 10px;">等待时长:</span>
      <el-input-number size="small" style="width: 100px;" :controls="false" v-model="search.waitTime"></el-input-number>
      <span style="font-size: 12px;margin:0px 10px;">二维码点击次数:</span>
      <el-input-number size="small" style="width: 100px;" :controls="false" v-model="search.clickNum"></el-input-number>
      <span style="font-size: 12px;margin:0px 10px;">文章Id:</span>
      <el-input size="small" style="width: 150px;" :controls="false" v-model="search.articleId"></el-input>
      <el-button type="primary" style="margin-left: 20px;" size="small" @click="queryData">搜索</el-button>
      <el-button type="primary" style="float: right;" size="small" @click="exportData">导出</el-button>
    </el-card>
    <el-card class="m-t-10">
      <el-table
        :data="tableData"
        border
        size="mini"
        :default-sort="{prop: 'time', order: 'descending'}"
      >
        <el-table-column prop="id" label="ID" min-width="100"></el-table-column>
        <el-table-column prop="nickname" label="用户名" min-width="120"></el-table-column>
        <el-table-column prop="device" label="设备号" min-width="120" v-if="hasShow"></el-table-column>
        <el-table-column prop="articleName" label="文章名称" min-width="120"></el-table-column>
        <el-table-column prop="place" label="地域" min-width="100">
          <template slot-scope="scope">
            <span>{{scope.row.province+scope.row.city+scope.row.district}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sourceUrl" label="来源" min-width="250"></el-table-column>
        <!-- <el-table-column prop="link" label="页面链接" min-width="150"></el-table-column> -->
        <el-table-column prop="lookProgress" label="浏览进度" min-width="100" sortable></el-table-column>
        <el-table-column prop="waitTime" label="访问时长" min-width="100" sortable></el-table-column>
        <el-table-column prop="clickNum" label="二维码点击次数" min-width="130" sortable></el-table-column>
        <el-table-column prop="lookCreateAt" label="访问时间" min-width="160" sortable></el-table-column>
      </el-table>
      <el-row class="m-t-10">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="20"
          layout="total, prev, pager, next"
          :total="totalNum"
        ></el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { reportList } from "@/api/report.js";
import {exportExcel }  from '@/utils/index.js'
export default {
  name: "",
  data() {
    return {
      search: {
        key: "",
        date: []
      },
      currentPage: 1,
      totalNum: 0,
      hasShow: false,
      tableData: []
    };
  },
  created() {
    this.queryData()
    if(localStorage.getItem('userId') == 1){
      this.hasShow = true
    }
  },
  methods: {
    queryData() {
      let param = {
        name: this.search.key,
        startTime: this.search.date.length > 0 ? this.search.date[0] : "",
        endTime: this.search.date.length > 0 ? this.search.date[1] : "",
        waitTime: this.search.waitTime,
        clickNum: this.search.clickNum,
        articleId: this.search.articleId,
        currentPage: this.currentPage,
        pagePerNum: 20
      };
      reportList(param).then(res => {
        console.log(res);
        const data = res.data;
        this.tableData = data.data;
        this.totalNum = data.totalNum;
      });
    },
    handleCurrentChange(val) {
        this.pagePerNum = val
        this.queryData()
    },
    exportData() {
      let param = {
        name: this.search.key,
        startTime: this.search.date.length > 0 ? this.search.date[0] : "",
        endTime: this.search.date.length > 0 ? this.search.date[1] : "",
        waitTime: this.search.waitTime,
        currentPage: this.currentPage,
        clickNum: this.search.clickNum,
        articleId: this.search.articleId,
        pagePerNum: 20
      }
      exportExcel('userFocus/getUserFocusListExport', param)
    }
  }
};
</script>
<style lang='scss' scoped>
.search_input {
  width: 250px;
  .el-button {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
    border-radius: 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}
.search_time {
  width: 300px;
  margin-left: 20px;
}
</style>